<template>
    <div class="dialoglistDiv">
        <div class="dialogsearchDiv">
            <DateRange v-model:start="obj.req.starttime" v-model:end="obj.req.endtime" sph="考试时间" class="mr5" />
            <el-input clearable placeholder="最低得分" v-model="obj.req.endfen" class="search_key" />
            <el-input clearable placeholder="最高得分" v-model="obj.req.startfen" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
            </div>
        </div>
        <div style="display: flex; flex-direction: row;">
            <div class="lefttb">
                <div class="table_box">
                    <div class="table_" id="tb">
                        <ul class="head">
                            <li class="wcen">姓名</li>
                            <li class="wcen">总分</li>
                            <li class="wcen">百分制得分</li>
                            <li class="wcen">答题时间</li>
                        </ul>
                        <div class="body">
                            <ul v-for="x in obj.ary" :key="x">
                                <li class="wcen">{{x.name}}</li>
                                <li class="wcen">{{x.fen}}</li>
                                <li class="wcen">{{(+x.bfen).toFixed(0)}}</li>
                                <li class="wcen">{{x.intime}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <Pager :value="obj.req" :init="init" />
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, inject, provide, computed } from 'vue'
    import DateRange from '@/components/date_range.vue'
    import Pager from '@/components/pager.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        ary: [],
        req: {
            "paper_id": inject("id").value || 0,
            "startfen":"",
            "endfen":"",
            "starttime":"",
            "endtime":"",
            currentpage: 1,
            pagesize: 10,
            count: 0,
        },
        show:true,
    });
    let init = () => {
        proxy.$ajax({
            url: 'evaluation_statistics/detail',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

</script>

<style scoped>
    ::-webkit-scrollbar { width:0px; background-color: #FFFFFF; }
    .listDiv { top: 70px; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    .lefttb { flex: 3; }
    .righttb { flex: 1; padding-left: 10px; }
    .cou { font-size: 14px; height: 40px; margin-right: 20px; }
    #tb ul li.li0 { width: 30px; }
    #tb ul li.li1 { width: 100px; }
    #tb ul li.li2 { width: 100px; }
    #tb ul li.li3 { width: 45px; }
    #tb ul li.li4 { width: 45px; }
    #tb ul li.li6 { width: 60px; }
</style>